<template>
	<view class="my">
		<view class="nav" >
			<view class="nav-heard">
				<view class="nav-heard-left" @click="goSet">
					<image src="../../static/imgs/myimgs/set.png" mode=""></image>
				</view>
				<view class="nav-heart-middle">
					<text>我的</text>
				</view>
				<view class="nav-heart-right">
					<image src="../../static/imgs/mess.png" mode=""></image>
				</view>
			</view>
			<view class="nav-people" v-if="userInfo.token">
				<view class="nav-people-left">
					<view class="nav-heard-left-text">
						<text class="nhlt-name">{{userInfo.accountName}}</text>
						<text class="nhlt-from">{{userInfo.nickName}}</text>
					</view>
				</view>
				<view class="nav-people-right">
					<u-avatar :src="userInfo.headIcon"></u-avatar>
				</view>
			</view>
			<view class="login" v-else><text @click="goLogin">点击登录</text></view>
		</view>
		<!-- 伪盒子 称高 -->
		<view class="box"></view>
		<!-- 小卡片 -->
		<view class="small-cart">
			  <u-row customStyle="margin-bottom: 10px" gutter="40rpx">
			    <u-col span="6">
			         <view class="demo-layout bg-purple-light">
						<view class="left-cart">
							<view class="text-top">待办事项</view>
							<view class="text-bottom">我的待办事项</view>
						</view>
					 </view>
			            </u-col>
			                <u-col span="6">
			                    <view class="demo-layout bg-purpl">
									<view class="right-cart">
										<view class="text-top">办事指南</view>
										<view class="text-bottom">办事指南汇总</view>
									</view>
								</view>
			            </u-col>
			        </u-row>
		</view>
		<!-- 推荐应用 -->
		<view class="recommend">
			<view class="recommend-title"><text>推荐应用</text></view>
			<workList v-for="(item,index) in workArr" :key="index" :size = 'workSize' :workItem='item'></workList>
		</view>
		<!-- 我的收藏 -->
		<view class="collection">
			<tabList :tabListArr='tabListArr'></tabList>
		</view>

	</view>
</template>

<script>
	import {getStorage} from '../../utility/local.js'
	export default {
		data() {
			return {
				//初始值
				userInfo:{},
				//导航栏的高
				navHeight:0,
				//work图片尺寸以及每个List尺寸以及间距
				workSize:{
					imgWidth:40,
					imgHeight:40,
					picWidth:88,
					picHeight:88,
					gap:20
				},
				//工作list
				workArr:[
					{
						title:'教职工请假申请',
						form:'工作部门:系统维护 请假申请人:xxx',
						time:'昨天',
						img:'../../static/imgs/messageimgs/2.png',
						bgColor:'#ffbf6b'
					},
					{
						title:'教职工请假申请',
						form:'任课教师:系统管理员',
						time:'昨天',
						img:'../../static/imgs/messageimgs/4.png',
						bgColor:'#8867f5'
					},
					{
						title:'教职工请假申请',
						form:'工作部门:系统维护 请假申请人:xxx',
						time:'昨天',
						img:'../../static/imgs/messageimgs/5.png',
						bgColor:'#3ad1ae'
					},
				],
				//tabList
				tabListArr:[
					{
						title:'我的收藏',
						newList:[
							{
								text:'学校概况',
								img:'../../static/imgs/appimgs/school.png'
							},
							{
								text:'学校地图',
								img:'../../static/imgs/appimgs/map.png'
							},
							{
								text:'我的消费',
								img:'../../static/imgs/appimgs/money.png'
							},
							{
								text:'电子邮件',
								img:'../../static/imgs/appimgs/email.png'
							},
							{
								text:'图书借阅',
								img:'../../static/imgs/appimgs/libray.png'
							},
							{
								text:'获奖成果',
								img:'../../static/imgs/appimgs/jiangbei.png'
							},
							{
								text:'我的党建',
								img:'../../static/imgs/appimgs/red.png'
							},
							{
								text:'网上审批',
								img:'../../static/imgs/appimgs/shenpi.png'
							},
						]
					},
					{
						title:'我的信息',
						newList:[
							{
								text:'教务系统',
								img:'../../static/imgs/myimgs/jw.png'
							},
							{
								text:'学费缴纳',
								img:'../../static/imgs/myimgs/xf.png'
							},
							{
								text:'星际课程',
								img:'../../static/imgs/myimgs/kc.png'
							},
							{
								text:'学生科研',
								img:'../../static/imgs/myimgs/ky.png'
							},
							{
								text:'在线选课',
								img:'../../static/imgs/myimgs/xk.png'
							},
							{
								text:'专业设置',
								img:'../../static/imgs/myimgs/sz.png'
							},
							{
								text:'学霸名单',
								img:'../../static/imgs/myimgs/xb.png'
							},
							{
								text:'学生信息',
								img:'../../static/imgs/myimgs/xx.png'
							},
						]
					},
					
				]
			
			}
		},
		//监控userInfo值发生的变化
		// watch:{
		// 	userInfo(value){
		// 		this.userInfo = value
		// 	}
		// },
		methods: {
			//判断是否为空 为空就跳转login 不为空就跳转设置
			goSet(){
				if(this.userInfo.token){
					uni.navigateTo({
						url:'/pages/set/set',
						animationType:'pop-in',
						animationDuration:1000
					})
				}else{
					uni.navigateTo({
						url:'/pages/login/login',
						animationType:'pop-in',
						animationDuration:1000
					})
					
				}
			},
			
			goLogin(){
				uni.navigateTo({
					url:'/pages/login/login',
					animationType:'pop-in',
					animationDuration:1000
				})
			}
		},
		onShow() {
			//获取导航栏的高度
			let h = uni.getSystemInfoSync().statusBarHeight 
			this.navHeight = h
			//将存储到内存的值取出来
			this.userInfo = getStorage()
		}
	}
</script>

<style scoped lang="scss">
		
	.my{
		
		.nav{
			background-image: url('../../static/imgs/myimgs/myNav.png');
			background-repeat: repeat-x ;
			padding: 100rpx 40rpx 20rpx 40rpx;
			background-size: 120%;
			box-sizing: border-box;
			width: 100%;
			position: fixed;
			z-index:1000;
			left: 0rpx;
			bottom: 0rpx;
			right: 0rpx;
			top: 0;
			overflow: hidden;
			background-color: #fff;
			height: 382rpx;
			
			.nav-heard{
				display: flex;
				justify-content: space-between;
				
				.nav-heard-left{
					image{
						width: 40rpx;
						height: 40rpx;
					}
				}
				
				.nav-heart-middle{
					text{
						font-size: 28rpx;
						font-weight: 600;
					}
				}
				
				.nav-heart-right{
					image{
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
			
			
			.nav-people{
				display: flex;
				justify-content: space-between;
				margin-top: 100rpx;
				
				.nav-heard-left-text{
					display: flex;
					flex-direction: column;
					
					
					.nhlt-name{
						font-size: 40rpx;
						font-weight: 600;
					}
					.nhlt-from{
						font-size: 24rpx;
						color: #6e7781;
						margin-top: 10rpx;
					}
				}
				
			}
			
		}
		
		.box{
			height: 400rpx;
		}
		
	
			
		.small-cart{
			padding: 0 20rpx;
			box-sizing: border-box;
			
			.left-cart{
				width: 100%;
				height: 180rpx;
				border-radius: 20rpx;
				background-color: rgba(255, 143, 103, 1);
				background-image: url('/static/imgs/man.png');
				background-size: 80%;
				background-repeat: no-repeat;
				background-position: -26rpx  18rpx;
				text-align: right;
				padding: 52rpx 34rpx 0rpx 0;
				box-sizing: border-box;
				.text-top{
					font-size: 20rpx;
					color: #fff;
				}
				.text-bottom{
					font-size: 20rpx;
					color: #fff;
					margin-top: 10rpx;
				}
			}
			
			.right-cart{
				width: 100%;
				height: 180rpx;
				border-radius: 20rpx;
				background-color: rgba(147, 247, 219, 1);
				background-image: url('../../static/imgs/woman.png');
				background-size: 80%;	
				background-repeat: no-repeat;
				background-position: 94rpx 6rpx;
				padding: 56rpx 0rpx 0rpx 26rpx;
				box-sizing: border-box;
				
				.text-top{
					font-size: 20rpx;
					color: #fff;
				}
				.text-bottom{
					font-size: 20rpx;
					color: #fff;
					margin-top: 10rpx;
				}
			}
		}
	
		.recommend{
			padding: 0 40rpx;
			margin-top: 40rpx;
			box-sizing: border-box;
			
			.recommend-title{
				margin-bottom: 40rpx;
					
				text{
					font-size: 32rpx;
					font-weight: 600;
				}
			}
		}
		
		.collection{
			padding: 0 40rpx;
			box-sizing: border-box;
			margin-top: 80rpx;
			
			.collection-title{
				
				text{
					font-size: 32rpx;
					font-weight: 600;
				}
			}
		}
	}
	
.login{
	text-align: center;
	margin-top: 80rpx;
	text{
		font-weight: 600;
		font-size: 36rpx;
	}
}
	
	


</style>
